<template>
    <div :class="props.class">
        <el-scrollbar class="cell-list-wrapper">
            <div v-for="rowIndex in props.rowCount" class="cell-row" :key="rowIndex">
                <div v-for="columnIndex in props.columnCount" class="cell-item" :key="columnIndex">
                    <el-row>
                        <el-col class="cell-info-item" :span="1">{{ getCellPosition(rowIndex, columnIndex) }}</el-col>
                        <el-col class="cell-info-item" :span="15"><el-input></el-input></el-col>
                        <el-col class="cell-info-item" v-if="props.viewType === `tray-info`" :span="2"></el-col>
                        <el-col class="cell-info-item" v-if="props.viewType === `tray-info`" :span="3"></el-col>
                        <el-col class="cell-info-item" v-if="props.viewType === `tray-info`" :span="3"></el-col>
                        <el-col class="cell-info-item" v-if="props.viewType === `tray-bind`" :span="8"></el-col>
                    </el-row>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script setup>
const props = defineProps([
    "class",
    "rowCount",
    "columnCount",
    "cellList",
    "viewType"
]);

const getCellPosition = (row, column) => {
    let cellPosition = 0;
    if (column % 2 === 1) {
        cellPosition = (column - 1) * props.rowCount + row;
    } else {
        cellPosition = (column - 1) * props.rowCount + (props.rowCount - row + 1);
    }

    return cellPosition;
};

</script>
<style scoped lang="less">
.cell-list-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .cell-row {
        width: auto;
        height: 4rem;
        display: flex;

    }

    .cell-item {
        width: 30vw;
        height: 4rem;
        flex-shrink: 0;

        .cell-info-item {
            height: 4rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
